<html>
    
    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script language="javascript">		
		var background = chrome.extension.getBackgroundPage();

		$("#container").ready(function () {
			loadRSS();
			if (background.getHightlightHeat() == 1) $('#checkbox').attr('checked', true);
			else $('#checkbox').attr('checked', false);
		});


		function showValue() {
			if ($("#checkbox").is(':checked') == true) background.setHightlightHeat(1);
			else background.setHightlightHeat(0);
			background.reloadDisplay();
			background.broadcastState();
		}

		function loadRSS() {
			$("#container").empty();			
			$.getJSON("http://content.bauermedia.co.uk/api/sites/heat/articles?apiKey=e13fd000-987e-43c2-bdea-07e743f8b5ce&format=json&pageSize=10", function (data) {
				if (data.Articles.length > 0) {
					background.setLastArticleHeat(data.Articles[0].Id);
					background.setExtensionText("");
				}
				$.each(data.Articles, function (i, Article) {
					var strHtml = "";
					strHtml += "<div class='bloque'>";
					var Title = Article.Title;
					var Link = Article.Permalink;
					var Intro = Article.Intro;
					var Image = Article.Images[1].Url;
					var DatePublished = Article.DatePublished;
					strHtml += "<a href='" + Link + "' target='_blank'><img src='" + Image + "'/></a>";
					strHtml += "<p><a href='" + Link + "' target='_blank' class='titular'>" + Title + "</a><span class='pubDate'>" + parseDate(DatePublished) + "</span>" + Intro + "<br/></p></div>";					
					$("#container").append(strHtml);
				});
			});
			
		}

		function parseDate(s) {
			var date = null;
			date = new Date(parseInt(s.replace("/Date(", "").replace(")/", ""), 10));
			return date.toUTCString();
		}
			</script>
		<style>
			body {margin: 0; padding: 0;}
			h1 {background: url(img/fondo-h1.gif); height: 40px; margin: 0; padding: 10px 0 0 0;}
			h1 img {display: block; margin: 0 0 0 11px;}
			div.checkbox {border-bottom: 1px solid #cccccc; font: 11px Verdana, Geneva, sans-serif; padding: 9px 5px 3px 0; color: #666; margin: 0 7px 10px 11px; }
			div.checkbox input {vertical-align: middle; padding: 0; margin: -1px 0 0 0;}

			div.contenidos {overflow: hidden; background: url(img/fondo-bottom.gif) left bottom repeat-x; margin: 0 4px;}
			div.contenidos .izq {background: url(img/fondo-bottom-izq.gif) left bottom no-repeat;}
			div.contenidos .dch {background: url(img/fondo-bottom-dch.gif) right bottom no-repeat;padding-bottom: 10px;}

			div.bloque {font: 11px Verdana, Geneva, sans-serif;  margin: 10px 7px 0 7px; clear: both; overflow: hidden; min-width: 400px;}
			div.bloque img {display: block; float: left;}
			div.bloque p {float: left; padding: 0 8px; margin: 0; width: 300px;}
			div.bloque a.titular {font: bold 13px Georgia, "Times New Roman", Times, serif; display: block; color: #000; text-decoration: none;}
			div.bloque a.titular:hover {text-decoration: underline;}
			div.bloque span {font-size: 10px; color: #999; display: block; margin-bottom: 8px;}
		</style>
    </head>
    
    <body>
		<h1>
			<img src="img/logo-heat.gif" alt="FHM" />
		</h1>
		<div class="checkbox">
			<input type="checkbox" id="checkbox" onclick="showValue()"/>
			<label for="checkbox">
				HighLight terms
			</label>
		</div>
		<div class="contenidos">
			<div class="izq">
				<div class="dch" id="container">Wait Please...</div>
			</div>
		</div>
		<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
		try {
		var pageTracker = _gat._getTracker("UA-12643256-2");
		pageTracker._trackPageview();
		} catch(err) {}
		</script>
    </body>

</html>